<template>
	<div>
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="handleClose"
			:dialogFooterBtn="true"
		>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
				<el-table-column prop="nickname" label="用户昵称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="avatar" label="头像" show-overflow-tooltip>
					<template #default="scope">
						<div class="image">
							<el-image v-if="scope.row.avatar != ''" :src="STATIC_URL + scope.row.avatar" fit="cover" class="image" />
							<!-- <el-image v-if="scope.row.avatar != ''" :src="STATIC_URL + scope.row.avatar" fit="cover" class="image" /> -->
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="email" label="用户邮箱" show-overflow-tooltip></el-table-column>
				<el-table-column prop="mobile" label="用户手机号" show-overflow-tooltip></el-table-column>
				<el-table-column prop="gender" label="性别" show-overflow-tooltip>
					<template #default="scope">
						<el-tag v-if="scope.row.gender == 'male'">男</el-tag>
						<el-tag v-else-if="scope.row.gender == 'female'">女</el-tag>
						<el-tag v-else>未知</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onRowChoice(scope.row)">选择</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:page-sizes="[10, 15, 20, 30, 50, 100]"
				v-model:current-page="state.tableData.paging.currentPage"
				background
				v-model:page-size="state.tableData.paging.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.paging.totalCount"
			>
			</el-pagination>
		</CustomDialog>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { dataFakeUserApi } from '/@/api/shop/data/fakeuser';
import { STATIC_URL } from '/@/utils/config';
const emit = defineEmits(['choiceUser']);
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '虚拟用户',
		submitTxt: '选择虚拟用户',
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		paging: {
			currentPage: 1,
			pageSize: 15,
			totalCount: 0,
			totalPages: 0,
		},
	},
});

const handleClose = () => {
	state.dialog.isShowDialog = false;
};
const open = () => {
	state.dialog.isShowDialog = true;
	getTableData();
};

const onRowChoice = (row: any) => {
	const fakeUser: FakeUser = {
		nickname: row.nickname,
		username: row.username,
		userId: row.id,
		avatar: row.avatar,
	};
	emit('choiceUser', fakeUser);
	handleClose();
};

// 分页改变
const onHandleSizeChange = (pageSize: number) => {
	state.tableData.paging.pageSize = pageSize;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (currentPage: number) => {
	state.tableData.paging.currentPage = currentPage;
	getTableData();
};

const getTableData = async () => {
	state.tableData.loading = true;
	const { data } = await dataFakeUserApi().search({
		offset: (state.tableData.paging.currentPage - 1) * state.tableData.paging.pageSize,
		limit: state.tableData.paging.pageSize,
	});
	state.tableData.data = data.datas;
	state.tableData.paging.currentPage = data.paging.currentPage;
	state.tableData.paging.totalCount = data.paging.totalCount;
	console.log('data: ', data);
	state.tableData.loading = false;
};

defineExpose({ open });
</script>

<style scoped lang="scss">
// .image {
// 	display: flex;
// 	align-items: center;
// 	justify-content: center;
// 	height: 50px;
// 	width: 50px;
// 	cursor: pointer;
// }
</style>
